<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span><br><br>
    <button @click="changeName">改名卡</button>
</div>
<script src="vue.js"></script>
<script>
    /**
     * 计算属性和方法的区别：
     * 1. 使用方式不同：
     *  计算属性：js中this.计算属性， 模版中{{计算属性}}
     *  方法：s中this.方法名()， 模版中{{方法名()}}
     * 2. 计算属性有缓存，再次使用直接读取缓存，发生改变会重新计算
     *
     * 计算属性分简写和完整写法
     * 1. 简写只能访问计算属性， 不能修改
     * 2. 完整写法，通过set方法修改
     */
    const app = new Vue({
        el: '#app',
        data: {
            firstName: '刘',
            lastName: '备',
        },
        methods: {
            changeName () {
                this.fullName = '黄忠'
            }
        },
        computed: {
            fullName: {
                get() {
                    return this.firstName + this.lastName
                },
                set(value) {
                    this.firstName = value.slice(0, 1)
                    this.lastName = value.slice(1)
                }
            }
        }
    })
</script>
</body>
</html>